import classNames from 'classnames'
import { ButtonHTMLAttributes, ReactNode } from 'react'
import styles from './Button.module.scss'

type ButtonSizes = 'extra-small' | 'large' | 'medium' | 'small'

type ButtonColors = 'error' | 'primary' | 'success'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode
  circle?: boolean
  className?: string
  color?: ButtonColors
  disabled?: boolean
  filled?: boolean
  iconName?: string
  iconPosition?: 'left' | 'right'
  link?: boolean
  size?: ButtonSizes
}

export const Button = ({
  children,
  circle = false,
  className,
  color = 'primary',
  disabled,
  filled,
  iconName,
  iconPosition = 'left',
  link,
  size = 'small',
  ...props
}: ButtonProps) => {
  const btnAllStyles = classNames(
    styles.btn,
    styles[size],
    {
      [styles.disabled]: disabled,
      [styles.link]: link,
      [styles['circle']]: circle,
      [styles[`filled-${color}`]]: filled && !disabled,
      [styles[`outlined-${color}`]]: !filled && !disabled,
    },
    className,
  )

  return (
    <button className={btnAllStyles} {...props}>
      <div className={styles.content}>
        {iconPosition === 'left' && <span className='material-symbols-rounded'>{iconName}</span>}
        {children}
        {iconPosition === 'right' && <span className='material-symbols-rounded'>{iconName}</span>}
      </div>
    </button>
  )
}
